
<template>
  <div>home</div>
  <!-- 访问store 仓库中的数据 -->
  <p>store-count: {{ $store.state.count }}</p>
  <p>store-count-getters: {{ $store.getters.doubleCount }}</p>
  <p>
    <button @click="addCountFn">同步+1</button>
    <button @click="addCountStepFn">同步+10</button>
    <button @click="addCountAsyncFn">异步+1</button>
    <button @click="addCountStepAsyncFn">异步+10</button>
    <button @click="jianFn">异步-1</button>
  </p>
  <!-- 展示学校列表 -->
  <ul>
    <li v-for="item in $store.state.schoolList" :key="item.id">
      {{ item.school_name }}
    </li>
  </ul>
  <!-- 展示学校列表-过滤后的 -->
  <ul>
    <li v-for="item in $store.getters.fiterSchool" :key="item.id">
      {{ item.school_name }}
    </li>
  </ul>
  <button @click="getschoollistFn">pagenum:第{{ pagenum }}页</button>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      pagenum: 1,
    };
  },
  created() {
    console.log("this-home", this.$store);
    // console.log(this.$store.state.count);
    // 初始化请求学校列表数据
    this.$store.dispatch("setschoolListAsync", this.pagenum);
    // 初始化请求机场数据列表
    axios.get("https://api.i-lynn.cn/area").then((res) => {
      console.log("行政区", res);
      this.$store.commit("setAirPortArr", res.data);
    });
  },
  mounted() {
    console.log("mounted", this);
  },
  methods: {
    addCountFn() {
      // 同步+1
      // console.log(this.$store);
      // 调用mutations 中的同步方法
      // 语法: 仓库.commit('要调用仓库中的同步方法名',参数)
      this.$store.commit("addcount");
    },
    addCountStepFn() {
      // 同步+10
      // 语法: 仓库.commit('要调用仓库中的同步方法名',参数)
      this.$store.commit("addcountstep", 10);
    },
    addCountAsyncFn() {
      // 异步+1
      // 调用actions中的异步方法了
      // console.log(this.$store);
      // 语法: 仓库.dispatch('仓库中的异步方法名',参数)
      this.$store.dispatch("addcountAsync");
    },
    addCountStepAsyncFn() {
      // 异步+10
      // 语法: 仓库.dispatch('仓库中的异步方法名',参数)
      this.$store.dispatch("addcountstepAsync", 10);
    },
    getschoollistFn() {
      // 让页数+1
      this.pagenum++;
      // 重新请求学校数据
      this.$store.dispatch("setschoolListAsync", this.pagenum);
    },
    jianFn() {
      this.$store.dispatch("jianAsync");
    },
  },
};
</script>
<style scoped>
</style>

